{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}

<div class="row">
  <div class="col-md-3">
      <h3>Scan Config</h3>
      <table class="table table-hover">
        <tr>
          <td>Scan Period (ms)</td>
          <td>
              <input id="scan_period" value='10' type="text" />
          </td>
        </tr>

        <tr>
            <td>Direction</td>
            <td>
               <select id="direction">
                 <option value="tx">TX</option>
                 <option value="rx">RX</option>
               </select>
            </td>
        </tr>

        <tr>
          <td>Select</td>
          <td>
             <select id="voa_x_y">
               <option value="voa_x">VOA_X</option>
               <option value="voa_y">VOA_Y</option>
             </select>
          </td>
        </tr>

        <tr>
            <td>Start_V</td>
            <td>
                <input id="start_v" value='0.0' type="text" />
            </td>
          </tr>
          <tr>
              <td>Stop_V</td>
              <td>
                  <input id="stop_v" value='4.5' type="text" />
              </td>
          </tr>
          <tr>
              <td>Step_V</td>
              <td>
                  <input id="step_v" value='0.01' type="text" />
              </td>
            </tr>
        <tr>
          <td colspan="2">
            <button id="voa_scan_start_btn" class="btn btn-success">
              Scan VOA
              &nbsp;&nbsp;
              <i id="voa_scan_start_btn_loading" class="fa fa-refresh fa-spin fa-fw"></i>
            </button>
            <!-- <button id="voa_scan_stop_btn" class="btn btn-primary">Stop ASAP</button> -->
            <br><br>
            <a href="./static/files/voa.csv" id="dl_voa_data"> Download Test Data</a>
          </td>
        </tr>
      </table>
  </div>

  <div class="col-md-9">
    <div id="main" style="width: 950px;height:400px;"></div>
  </div>

</div>

{% endblock %} 

{% block js%}
{{ super() }}
<script type="text/javascript">

  function get_voa_scan_data()
  {
      // dom and  create a chart instance 
      var myChart = echarts.init(document.getElementById('main'));

      url = "/api/get_voa_scan_data"
      $.post(url, 
            {
              scan_period: $("#scan_period").val(),
              direction: $("#direction").val(),
              voa_x_y: $("#voa_x_y").val(),
              start_v: $("#start_v").val(),
              stop_v: $("#stop_v").val(),
              step_v: $("#step_v").val(),
            },
          function(data, status){
            // console.log(data);
            $("#voa_scan_start_btn_loading").hide();

            // show a download data link
            $("#dl_voa_data").show();

            // display charts
            // console.log('-------------------------------------------');
            // console.log(typeof(data))
            // console.log(data);
            // console.log(typeof((eval("("+data+")"))[0]));
            // console.log((eval("("+data+")"))[0]);
            // console.log('-------------------------------------------');
            option = {
              color: ['#0066CC'],
              xAxis: {
                type: 'category',
                data: (eval("("+data+")"))[0]
              },
              yAxis: {
              type: 'value'
              },
              series: [{
                data: eval("("+data+")")[1],
                type: 'line'
              }]
            };
            // display chart with config options
            myChart.setOption(option);
      });
     
  }

  $(document).ready(function() {
    $("#dl_voa_data").hide();
    $("#voa_scan_start_btn_loading").hide();

    $("#voa_scan_start_btn").click(function () {
      $("#voa_scan_start_btn_loading").hide();
      get_voa_scan_data();
      $("#voa_scan_start_btn_loading").show();
    });
    


  });
</script>
{% endblock %}
